<script setup name="pageSystemUser">
import { ref, onMounted } from 'vue'
import { useStore } from "vuex"
import { isUsersCreate, isUsersUpdate, isUsersDelete, isUsersManage } from '@/mixins/permission'
import * as funUser from "@/apis/system/user"
import UserEdit from "./components/userEdit.vue"

const store = useStore()
const getters = store.getters

// 查询条件
const listQuery = ref({
    keywords: null,
    isActive: null,
    page: 1,
    size: $Common.appPageSize
})
const tableData = ref([])
const isPagination = ref(false)
const total = ref(0)
const pageSizes = $Common.appPageSizes
const tableDateFormat = $Common.tableDateFormat

// 初始化数据
onMounted (() => {
    getListData()
})

// 分页查询
const handleSizeChange = (val) => {
    $Common.fullLoading()
    listQuery.value.size = val
    getListData()
}
const handleCurrentChange = (val) => {
    $Common.fullLoading()
    listQuery.value.page = val
    getListData()
}

// 查询数据
const getListData = async () => {
    $Common.fullLoading()
    funUser.getAll(listQuery.value).then(response => {
        $Common.closeFullLoading()
        total.value = response.totalCount || 0
        isPagination.value = response.totalCount > 0 || false
        if (response && response.items && response.items.length > 0) {
            tableData.value = response.items
        } else {
            tableData.value = []
        }
    })
}

const _search = () => {
    listQuery.value.page = 1
    getListData()
}

const refUserEdit = ref(null)
const _edit = (row) => {
    refUserEdit.value.open(row)
}

const _delete = (row) => {
    if (row && row.id) {
        $Common.confirm("确定要删除名为“" + row.name + "”的用户吗？").then(() => {
            $Common.fullLoading()
            funUser.remove({ id: row.id }).then(res => {
                commonSuccess()
            })
        })
    }
}

const _changePassword = (row) => {
    if (getters && getters.user && getters.user.userName === row.userName) {
        $Common.warningMsg("当前账户的密码，请在顶部修改!")
        return false
    }
    $Common.prompt("设置新密码:", "修改密码", {
        closeOnClickModal: false,
        closeOnPressEscape: false,
        inputValue: "",
        beforeClose: (action, instance, done) => {
            if (action == "confirm") {
                if (instance.inputValue && instance.inputValue.length >= 0) {
                    done()
                } else {
                    this.warningMsg("请输入新密码!")
                }
            } else {
                done()
            }
        }
    }).then(res => {
        let commitData = {
            id: row.id,
            newPassword: res.value
        }
        funUser.updateUserPassword(commitData).then(res => {
            commonSuccess()
        })
    })
}

const commonSuccess = (val) => {
    let tips = val || "操作成功!"
    $Common.alert(tips).then(() => {
        $Common.closeFullLoading()
        getListData()
    })
}
</script>

<template>
    <div class="page-system-user">
        <div class="toolbars mrgb10">
            <div class="fl">
                <el-button type="primary" plain v-if="isUsersCreate" @click="_edit()">
                    <i class="fa fa-plus"></i>
                    <span class="mrgl5">新增</span>
                </el-button>
            </div>
            <div class="fr"></div>
            <div class="clearb"></div>
        </div>

        <el-table :data="tableData" size="large" border>
            <el-table-column label="帐号" prop="userName"></el-table-column>
            <el-table-column label="姓名" prop="name"></el-table-column>
            <el-table-column label="是否激活">
                <template #default="scope">
                    {{ scope.row.isActive ? "是" : "否" }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="creationTime" :formatter="tableDateFormat" min-width="100"></el-table-column>
            <el-table-column label="最近更新时间" prop="lastModificationTime" :formatter="tableDateFormat" min-width="110"></el-table-column>
            <el-table-column label="操作" width="110px">
                <template #default="scope">
                    <el-dropdown trigger="click" placement="bottom">
                        <el-button type="primary" plain>更多<el-icon><ArrowDown /></el-icon></el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click.native="_edit(scope.row)" v-if="isUsersUpdate">编辑</el-dropdown-item>
                                <el-dropdown-item @click.native="_delete(scope.row)" v-if="isUsersDelete">删除</el-dropdown-item>
                                <el-dropdown-item @click.native="_changePassword(scope.row)" v-if="isUsersManage">修改密码</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                :current-page="listQuery.page" :page-sizes="pageSizes" :page-size="listQuery.size" 
                :hide-on-single-page="false" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!--用户编辑-->
        <UserEdit ref="refUserEdit" @refreshData="getListData()"></UserEdit>
    </div>
</template>

<style lang="scss" scoped></style>